<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=375px, initial-scale=1.0">
<title>音乐App</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#e13e3e',
secondary: '#AAAAAA'
},
borderRadius: {
'none': '0px',
'sm': '2px',
DEFAULT: '4px',
'md': '8px',
'lg': '12px',
'xl': '16px',
'2xl': '20px',
'3xl': '24px',
'full': '9999px',
'button': '4px'
}
}
}
}
</script>
<style>
body {
width: 375px;
height: 762px;
margin: 0 auto;
background: #FFFFFF;
overflow-x: hidden;
}
.tab-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 56px;
color: #AAAAAA;
transition: all 0.3s;
}
.tab-item.active {
color: #e13e3e;
}
.tab-item i {
font-size: 24px;
margin-bottom: 4px;
}
.tab-item span {
font-size: 10px;
}
.content {
display: none;
padding-top: 56px;
padding-bottom: 56px;
min-height: 100vh;
}
.content.active {
display: block;
}
</style>
</head>
<body>
<div id="home" class="content active">
<!-- 首页内容 -->
<div class="w-full h-[200px] bg-primary">
<h1 class="text-white text-2xl font-bold p-4">推荐音乐</h1>
</div>
<div class="p-4">
<h2 class="text-lg font-bold mb-4">热门歌单</h2>
<div class="grid grid-cols-2 gap-4">
<div class="rounded-lg overflow-hidden shadow">
<img src="https://ai-public.mastergo.com/ai/img_res/a853853dac41e83076230c895f5f902e.jpg" alt="歌单" class="w-full h-[150px] object-cover">
<div class="p-2">
<p class="text-sm">流行音乐精选</p>
</div>
</div>
<div class="rounded-lg overflow-hidden shadow">
<img src="https://ai-public.mastergo.com/ai/img_res/05d783f8f1fdbd4bd4eaace87a8db517.jpg" alt="歌单" class="w-full h-[150px] object-cover">
<div class="p-2">
<p class="text-sm">古典音乐精选</p>
</div>
</div>
</div>
</div>
</div>
<div id="discover" class="content">
<!-- 发现页内容 -->
<div class="p-4">
<div class="mb-4">
<input type="text" placeholder="搜索音乐" class="w-full p-3 rounded-lg bg-gray-100 outline-none">
</div>
<h2 class="text-lg font-bold mb-4">热门话题</h2>
<div class="grid grid-cols-2 gap-4">
<div class="rounded-lg bg-gray-100 p-4">
<h3 class="font-bold mb-2">#音乐分享</h3>
<p class="text-sm text-gray-600">分享你喜欢的音乐</p>
</div>
<div class="rounded-lg bg-gray-100 p-4">
<h3 class="font-bold mb-2">#新歌推荐</h3>
<p class="text-sm text-gray-600">最新音乐资讯</p>
</div>
</div>
</div>
</div>
<div id="notes" class="content">
<div class="sticky top-0 bg-white z-10">
  <div class="flex items-center justify-between p-4 border-b">
    <h1 class="text-xl font-bold">音乐笔记</h1>
    <i class="fas fa-ellipsis-h text-gray-500"></i>
  </div>
  <div class="flex p-2 border-b">
    <button class="flex-1 py-2 text-primary border-b-2 border-primary">推荐</button>
    <button class="flex-1 py-2 text-gray-500">热门</button>
    <button class="flex-1 py-2 text-gray-500">关注</button>
  </div>
</div>
<div class="p-4">
  <div class="bg-gradient-to-r from-primary to-red-400 rounded-xl p-4 text-white mb-6 shadow-lg">
    <div class="flex items-center justify-between mb-4">
      <div class="flex items-center">
        <i class="fas fa-music text-2xl"></i>
        <h2 class="text-lg font-bold ml-2">创建音乐笔记</h2>
      </div>
      <button class="bg-white text-primary px-6 py-2 rounded-full font-bold hover:bg-gray-100 transition-colors">
        <i class="fas fa-pen mr-2"></i>开始创作
      </button>
    </div>
    <p class="text-sm opacity-90">记录你的音乐灵感，分享美好时刻</p>
  </div>
  <div class="space-y-6">
    <div class="bg-white rounded-xl shadow-md overflow-hidden">
      <div class="p-4">
        <div class="flex items-center justify-between mb-3">
          <div class="flex items-center">
            <img src="https://ai-public.mastergo.com/ai/img_res/9035b0d3a1f6d2048f4c92667801408b.jpg" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white shadow">
            <div class="ml-2">
              <p class="font-bold">Sarah_Music</p>
              <p class="text-xs text-gray-500">音乐人 · 3分钟前</p>
            </div>
          </div>
          <button class="text-gray-500 hover:text-primary">
            <i class="fas fa-ellipsis-v"></i>
          </button>
        </div>
        
        <div class="mb-3">
          <p class="text-sm leading-relaxed">🎵《无条件》- 陈奕迅</p>
          <p class="text-sm leading-relaxed mt-2">这首歌的编曲太绝了！副歌部分的弦乐编排让整个情感表达达到巅峰，尤其是在2:30秒的位置，当电吉他solo出现的时候...</p>
        </div>
        <div class="bg-gray-50 rounded-lg p-3 mb-3 flex items-center">
          <div class="w-12 h-12 bg-gray-200 rounded-lg flex items-center justify-center">
            <i class="fas fa-play text-primary"></i>
          </div>
          <div class="ml-3 flex-1">
            <p class="font-bold text-sm">无条件</p>
            <p class="text-xs text-gray-500">陈奕迅</p>
          </div>
          <div class="text-xs text-gray-500">
            02:30
          </div>
        </div>
        <div class="flex items-center justify-between text-gray-500 text-sm">
          <div class="flex items-center space-x-4">
            <button class="flex items-center hover:text-primary">
              <i class="far fa-heart"></i>
              <span class="ml-1">2.4k</span>
            </button>
            <button class="flex items-center hover:text-primary">
              <i class="far fa-comment"></i>
              <span class="ml-1">168</span>
            </button>
          </div>
          <button class="hover:text-primary">
            <i class="fas fa-share-alt"></i>
          </button>
        </div>
      </div>
    </div>
    <div class="bg-white rounded-xl shadow-md overflow-hidden">
      <div class="p-4">
        <div class="flex items-center justify-between mb-3">
          <div class="flex items-center">
            <img src="https://ai-public.mastergo.com/ai/img_res/8089841f8b1c337b2f9adec5cae1e24a.jpg" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white shadow">
            <div class="ml-2">
              <p class="font-bold">David_Guitar</p>
              <p class="text-xs text-gray-500">吉他达人 · 15分钟前</p>
            </div>
          </div>
          <button class="text-gray-500 hover:text-primary">
            <i class="fas fa-ellipsis-v"></i>
          </button>
        </div>
        
        <div class="mb-3">
          <p class="text-sm leading-relaxed">分享一段即兴创作 🎸</p>
          <div class="mt-3 grid grid-cols-2 gap-2">
            <img src="https://ai-public.mastergo.com/ai/img_res/2526ba8a545e185fe029cea467496e1c.jpg" class="w-full h-36 object-cover rounded-lg">            <img src="https://ai-public.mastergo.com/ai/img_res/5f132465e8f920ada9f237fa4f43bea9.jpg" class="w-full h-36 object-cover rounded-lg">
          </div>
        </div>
        <div class="flex items-center justify-between text-gray-500 text-sm">
          <div class="flex items-center space-x-4">
            <button class="flex items-center hover:text-primary">
              <i class="far fa-heart"></i>
              <span class="ml-1">1.2k</span>
            </button>
            <button class="flex items-center hover:text-primary">
              <i class="far fa-comment"></i>
              <span class="ml-1">89</span>
            </button>
          </div>
          <button class="hover:text-primary">
            <i class="fas fa-share-alt"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="fixed bottom-20 right-4">
  <button class="w-12 h-12 bg-primary rounded-full shadow-lg flex items-center justify-center text-white hover:bg-red-600 transition-colors">
    <i class="fas fa-plus text-xl"></i>
  </button>
</div>
</div>
<div id="follow" class="content">
  <div class="sticky top-0 bg-white z-10">
    <div class="flex items-center justify-between p-4 border-b">
      <h1 class="text-xl font-bold">动态</h1>
      <i class="fas fa-bell text-gray-500 relative">
        <span class="absolute -top-1 -right-1 w-2 h-2 bg-primary rounded-full"></span>
      </i>
    </div>
    <div class="flex p-2 border-b">
      <button class="flex-1 py-2 text-primary border-b-2 border-primary">关注</button>
      <button class="flex-1 py-2 text-gray-500">附近</button>
    </div>
  </div>
  <div class="p-4 space-y-6">
    <!-- 热门音乐人 -->
    <div class="mb-6">
      <h3 class="text-sm font-bold mb-3">热门音乐人</h3>
      <div class="flex overflow-x-auto space-x-4 pb-2">
        <div class="flex-shrink-0 w-20 text-center">
          <div class="relative inline-block">
            <img src="https://ai-public.mastergo.com/ai/img_res/5fc2ace6823b55e7df0f18e9af54e853.jpg" alt="音乐人" class="w-16 h-16 rounded-full border-2 border-primary">
            <span class="absolute bottom-0 right-0 w-4 h-4 bg-primary rounded-full flex items-center justify-center text-white text-xs">
              <i class="fas fa-music"></i>
            </span>
          </div>
          <p class="text-xs mt-1 font-bold">周杰伦</p>
          <p class="text-xs text-gray-500">音乐人</p>
        </div>
        <div class="flex-shrink-0 w-20 text-center">
          <div class="relative inline-block">
            <img src="https://ai-public.mastergo.com/ai/img_res/0dbee47a3462304a140ad668609540e8.jpg" alt="音乐人" class="w-16 h-16 rounded-full border-2 border-white">
            <span class="absolute bottom-0 right-0 w-4 h-4 bg-primary rounded-full flex items-center justify-center text-white text-xs">
              <i class="fas fa-music"></i>
            </span>
          </div>
          <p class="text-xs mt-1 font-bold">Taylor</p>
          <p class="text-xs text-gray-500">歌手</p>
        </div>
        <div class="flex-shrink-0 w-20 text-center">
          <div class="relative inline-block">
            <img src="https://ai-public.mastergo.com/ai/img_res/aa26cbd0df0d2b1696130484e10bbaac.jpg" alt="音乐人" class="w-16 h-16 rounded-full border-2 border-white">
            <span class="absolute bottom-0 right-0 w-4 h-4 bg-primary rounded-full flex items-center justify-center text-white text-xs">
              <i class="fas fa-music"></i>
            </span>
          </div>
          <p class="text-xs mt-1 font-bold">林俊杰</p>
          <p class="text-xs text-gray-500">歌手</p>
        </div>
      </div>
    </div>
    <!-- 动态内容 -->
    <div class="bg-white rounded-xl shadow-md overflow-hidden">
      <div class="p-4">
        <div class="flex items-center justify-between mb-3">
          <div class="flex items-center">
            <img src="https://ai-public.mastergo.com/ai/img_res/7dca75cb7693d2563b0975a49648ccc1.jpg" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white shadow">
            <div class="ml-2">
              <p class="font-bold">Emma_Official</p>
              <p class="text-xs text-gray-500">1小时前</p>
            </div>
          </div>
          <button class="px-4 py-1 rounded-full border border-primary text-primary text-sm hover:bg-primary hover:text-white transition-colors">
            关注
          </button>
        </div>
        
        <div class="mb-3">
          <p class="text-sm leading-relaxed">新歌《Summer Night》发布啦！🎵 期待与大家分享这份夏日美好 ✨</p>
          <div class="mt-3 relative">
            <img src="https://ai-public.mastergo.com/ai/img_res/d711504cc338f03c321855f3bc677223.jpg" class="w-full h-48 object-cover rounded-lg">
            <div class="absolute bottom-3 left-3 bg-black bg-opacity-50 text-white px-2 py-1 rounded-lg text-xs">
              <i class="fas fa-play mr-1"></i>
              2:35
            </div>
          </div>
        </div>
        <div class="flex items-center justify-between text-gray-500 text-sm">
          <div class="flex items-center space-x-4">
            <button class="flex items-center hover:text-primary">
              <i class="far fa-heart"></i>
              <span class="ml-1">8.9k</span>
            </button>
            <button class="flex items-center hover:text-primary">
              <i class="far fa-comment"></i>
              <span class="ml-1">2.1k</span>
            </button>
          </div>
          <button class="hover:text-primary">
            <i class="fas fa-share-alt"></i>
          </button>
        </div>
      </div>
    </div>
    <div class="bg-white rounded-xl shadow-md overflow-hidden">
      <div class="p-4">
        <div class="flex items-center justify-between mb-3">
          <div class="flex items-center">
            <img src="https://ai-public.mastergo.com/ai/img_res/5e166ef1a9027ead5905576cfc0dbb5d.jpg" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white shadow">
            <div class="ml-2">
              <p class="font-bold">Alex_Guitar</p>
              <p class="text-xs text-gray-500">2小时前</p>
            </div>
          </div>
          <button class="px-4 py-1 rounded-full bg-gray-100 text-gray-500 text-sm">
            已关注
          </button>
        </div>
        
        <div class="mb-3">
          <p class="text-sm leading-relaxed">准备今晚的演出 🎸</p>
          <div class="mt-3 grid grid-cols-3 gap-1">
            <img src="https://ai-public.mastergo.com/ai/img_res/ab5bf240e6679f7095d28bd89f08b28e.jpg" class="w-full h-24 object-cover rounded-lg">
            <img src="https://ai-public.mastergo.com/ai/img_res/da144e7c9fc6ca711732a8c88edc132b.jpg" class="w-full h-24 object-cover rounded-lg">
            <img src="https://ai-public.mastergo.com/ai/img_res/a0eff7ba38889a8174926a21fe39c2fb.jpg" class="w-full h-24 object-cover rounded-lg">
          </div>
        </div>
        <div class="flex items-center justify-between text-gray-500 text-sm">
          <div class="flex items-center space-x-4">
            <button class="flex items-center hover:text-primary">
              <i class="far fa-heart"></i>
              <span class="ml-1">3.2k</span>
            </button>
            <button class="flex items-center hover:text-primary">
              <i class="far fa-comment"></i>
              <span class="ml-1">428</span>
            </button>
          </div>
          <button class="hover:text-primary">
            <i class="fas fa-share-alt"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="profile" class="content">
  <div class="relative">
    <div class="relative bg-gradient-to-b from-primary to-red-400 p-6 pb-20 text-white">
      <div class="flex items-center justify-between mb-6">
        <div class="flex items-center">
          <div class="relative">
            <img src="https://ai-public.mastergo.com/ai/img_res/49f09a50d6fed0d528f3120d0a2d2e31.jpg" alt="头像" class="w-20 h-20 rounded-full border-2 border-white shadow-lg">
            <span class="absolute bottom-0 right-0 w-6 h-6 bg-yellow-400 rounded-full flex items-center justify-center">
              <i class="fas fa-crown text-white text-sm"></i>
            </span>
          </div>
          <div class="ml-4">
            <h2 class="text-xl font-bold">Christina</h2>
            <p class="text-sm opacity-90">黑胶VIP会员</p>
            <div class="flex items-center mt-1">
              <span class="text-xs bg-black bg-opacity-20 px-2 py-1 rounded-full">Lv.8</span>
              <span class="text-xs ml-2">村龄 4 年</span>
            </div>
          </div>
        </div>
        <button class="px-4 py-1 bg-white bg-opacity-20 rounded-full text-sm">
          编辑资料
        </button>
      </div>
      
      <p class="text-sm opacity-90 mb-4">音乐是我生命中不可或缺的部分 🎵</p>
    </div>
    <div class="absolute bottom-0 left-0 right-0">
      <div class="mx-4 bg-white rounded-xl shadow-lg p-4 flex justify-around">
        <div class="text-center">
          <p class="font-bold text-lg">1,234</p>
          <p class="text-xs text-gray-500">关注</p>
        </div>
        <div class="text-center">
          <p class="font-bold text-lg">5,678</p>
          <p class="text-xs text-gray-500">粉丝</p>
        </div>
        <div class="text-center">
          <p class="font-bold text-lg">9,999</p>
          <p class="text-xs text-gray-500">获赞</p>
        </div>
        <div class="text-center">
          <p class="font-bold text-lg">320</p>
          <p class="text-xs text-gray-500">收藏</p>
        </div>
      </div>
    </div>
  </div>
  <div class="mt-16 px-4 space-y-4">
    <!-- 创作者中心 -->
    <div class="bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl p-4 text-white">
      <div class="flex items-center justify-between mb-2">
        <h3 class="font-bold">创作者中心</h3>
        <i class="fas fa-chevron-right"></i>
      </div>
      <p class="text-sm opacity-90">发现音乐创作的无限可能</p>
    </div>
    <!-- 我的音乐 -->
    <div class="bg-white rounded-xl shadow-md">
      <div class="p-4 border-b">
        <h3 class="font-bold">我的音乐</h3>
      </div>
      <div class="grid grid-cols-4 p-4 gap-4">
        <div class="text-center">
          <div class="w-12 h-12 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-1">
            <i class="fas fa-music text-primary"></i>
          </div>
          <p class="text-xs">本地音乐</p>
        </div>
        <div class="text-center">
          <div class="w-12 h-12 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-1">
            <i class="fas fa-cloud-download-alt text-primary"></i>
          </div>
          <p class="text-xs">下载管理</p>
        </div>
        <div class="text-center">
          <div class="w-12 h-12 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-1">
            <i class="fas fa-history text-primary"></i>
          </div>
          <p class="text-xs">最近播放</p>
        </div>
        <div class="text-center">
          <div class="w-12 h-12 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-1">
            <i class="fas fa-heart text-primary"></i>
          </div>
          <p class="text-xs">我的收藏</p>
        </div>
      </div>
    </div>
    <!-- 创建的歌单 -->
    <div class="bg-white rounded-xl shadow-md">
      <div class="p-4 border-b">
        <h3 class="font-bold">创建的歌单</h3>
      </div>
      <div class="divide-y">
        <div class="flex items-center p-4">
          <img src="https://ai-public.mastergo.com/ai/img_res/bfe76528310db1788d7497fa9a2f2161.jpg" class="w-12 h-12 rounded-lg">
          <div class="ml-3 flex-1">
            <p class="font-bold text-sm">我喜欢的音乐</p>
            <p class="text-xs text-gray-500">238首</p>
          </div>
          <i class="fas fa-chevron-right text-gray-400"></i>
        </div>
        <div class="flex items-center p-4">
          <img src="https://ai-public.mastergo.com/ai/img_res/2f41f38552d5589fa8c96ce724b388e6.jpg" class="w-12 h-12 rounded-lg">
          <div class="ml-3 flex-1">
            <p class="font-bold text-sm">2023年度歌单</p>
            <p class="text-xs text-gray-500">164首</p>
          </div>
          <i class="fas fa-chevron-right text-gray-400"></i>
        </div>
      </div>
    </div>
    <!-- 音乐服务 -->
    <div class="bg-white rounded-xl shadow-md">
      <div class="p-4 border-b">
        <h3 class="font-bold">音乐服务</h3>
      </div>
      <div class="grid grid-cols-4 p-4 gap-4">
        <div class="text-center">
          <div class="w-12 h-12 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-1">
            <i class="fas fa-ticket-alt text-primary"></i>
          </div>
          <p class="text-xs">演出票务</p>
        </div>
        <div class="text-center">
          <div class="w-12 h-12 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-1">
            <i class="fas fa-shopping-bag text-primary"></i>
          </div>
          <p class="text-xs">商城</p>
        </div>
        <div class="text-center">
          <div class="w-12 h-12 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-1">
            <i class="fas fa-bell text-primary"></i>
          </div>
          <p class="text-xs">消息中心</p>
        </div>
        <div class="text-center">
          <div class="w-12 h-12 mx-auto bg-gray-100 rounded-xl flex items-center justify-center mb-1">
            <i class="fas fa-cog text-primary"></i>
          </div>
          <p class="text-xs">设置</p>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 底部导航栏 -->
<div class="fixed bottom-0 w-[375px] bg-white border-t border-gray-200">
<div class="grid grid-cols-5">
<div class="tab-item active" data-tab="home">
<i class="fas fa-home"></i>
<span>首页</span>
</div>
<div class="tab-item" data-tab="discover">
<i class="fas fa-search"></i>
<span>发现</span>
</div>
<div class="tab-item" data-tab="notes">
<i class="fas fa-edit"></i>
<span>笔记</span>
</div>
<div class="tab-item" data-tab="follow">
<i class="fas fa-heart"></i>
<span>关注</span>
</div>
<div class="tab-item" data-tab="profile">
<i class="fas fa-user"></i>
<span>我的</span>
</div>
</div>
</div>
<script>
document.querySelectorAll('.tab-item').forEach(item => {
item.addEventListener('click', () => {
// 移除所有active类
document.querySelectorAll('.tab-item').forEach(tab => {
tab.classList.remove('active');
});
document.querySelectorAll('.content').forEach(content => {
content.classList.remove('active');
});
// 添加active类到当前项
item.classList.add('active');
const tabId = item.getAttribute('data-tab');
document.getElementById(tabId).classList.add('active');
});
});
</script>
</body>
</html>